<template>
	<view class="popup">
		<view class="mx-4 bg-white rounded-lg w-100">
			<view class="flex py-4 flex-column justify-between align-center border-bottom">
				<text class="font mb-4">{{title}}</text>
				<input @blur="blurName" @input="bindinput" :type="title=='修改昵称'?'nickname':'text'" v-model="text" class="border" style="width: 85%; height: 60rpx;"/>
			</view>
			<view class="flex" style="height: 100rpx;">
				<view @click="cancel()" class="flex justify-center align-center w-100 border-right">
					<text class="font text-dark">取消</text>
				</view>
				<view @click="confirm()" class="flex justify-center align-center w-100">
					<text class="font text-primary">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text:""
			}
		},
		props: {
			title: {
				type: String,
				default: ""
			}
		},
		methods: {
			bindinput(e) {//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				if(this.title == '修改昵称'){
					this.text = e.detail.value;
				};
			},
			blurName(e) { //昵称失焦
				if(this.title == '修改昵称'){
					this.text = e.detail.value;
				}
			},
			cancel(){
				this.$emit("cancel")
			},
			confirm(){
				this.$emit("confirm",this.text)
			}
		},
	}
</script>

<style lang="scss">
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>